<template>
  <!--打印案件 -->
  <section class="component print-record" id="table-content">
    <div class="printonly">
      <div class="printStyle">
        <data-box :data="badDebtAllDatas" style="padding-left: 0px;" hiddenIndex>
            <template slot="columns">
                <el-table-column label="申请坏账总览">
                    <el-table-column prop="verifyBatchNumber" label="申请批次号" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                    <el-table-column prop="personalNum" label="客户数" :min-width="$helper.getColumnWidth(2)">
                    </el-table-column>
                    <el-table-column prop="overdueCapitals" label="总体本金余额" :min-width="$helper.getColumnWidth(2)">
                    </el-table-column>
                    <el-table-column prop="overdueInterests" label="总利息余额" :min-width="$helper.getColumnWidth(2)">
                    </el-table-column>
                    <el-table-column prop="badDebtAmounts" label="核销金额" :min-width="$helper.getColumnWidth(2)">
                    </el-table-column>
                    <el-table-column prop="applyDate" label="申请时间" :formatter="(row) => $filter.dateTimeFormat(row.applyDate)" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                </el-table-column>
            </template>
        </data-box>
      </div>
      <div class="printStyle">
          <el-table :data="approvalDescription"  style="width: 100%">
              <el-table-column prop="applyDescription" label="坏账确认申请说明" :min-width="$helper.getColumnWidth(3)">
              </el-table-column>
          </el-table>
      </div>
      <div class="printStyle">
        <data-box :data="approvalOpinions" style="padding-left: 0px;" hiddenIndex>
            <template slot="columns">
                <el-table-column label="审批意见" >
                    <el-table-column prop="applyCategory" label="审批名称" :formatter="(row) => $filter.dictConvert(row.applyCategory,'ApplyCategory')" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                    <el-table-column prop="processPhase" label="流程阶段" :formatter="(row) => $filter.dictConvert(row.processPhase,'ProcessPhase')" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                    <el-table-column prop="roleName" label="操作角色" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                    <el-table-column prop="approvalRealName" label="操作人员" :min-width="$helper.getColumnWidth(3)">
                    </el-table-column>
                    <el-table-column prop="applyTime" label="接收时间" :formatter="(row) => $filter.dateTimeFormat(row.applyTime)" :min-width="$helper.getColumnWidth(5)">
                    </el-table-column>
                    <el-table-column prop="approvalTime" label="处理时间" :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)">
                    </el-table-column>
                    <el-table-column prop="approvalOpinion" label="意见" :min-width="$helper.getColumnWidth(3)" >
                    </el-table-column>
                </el-table-column>
            </template>
        </data-box>
      </div>
    </div>
    <div class="confirm-button noprint">
      <el-button @click="print()" :loading="submitLoading">打印</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import DataBox from '~/components/common/data-box.vue';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { State, Getter, Action, namespace } from 'vuex-class';
import { CaseApplyRecordService } from '~/services/domain-service/case-apply-record.service';
import { CaseVerifyService } from '~/services/domain-service/case-verify.service';
import { PageService } from '~/utils/page.service';
import { CommonService } from "~/utils/common.service";

const CollectionExecution = namespace('collection-execution');

@Component({
  components: {
    DataBox,
  },
})
export default class PrintRecord extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Dependencies(CaseVerifyService)
  private caseVerifyService: CaseVerifyService;
  private submitLoading: boolean = false;
  @Prop()
  private rowData:any
  private approvalOpinions: any[] = [];
  private badDebtAllDatas: any[] = [];
  private approvalDescription: any[] = [];
  private verifyBatchNumber: any = '';
  // 最终要打印的内容
  private printContent: any = ''
  private printPageHeight: number = 0
  
  @Emit('close')
  private close() {
    this.reset();
  }
  

  private created(){
    
  }

@Watch('rowData', { immediate: true })
  private rowDataChange(value) {
    // console.log(value,"value")
    // console.log(value.id,"value.id")
    this.caseApplyRecordService
    .recordHistory({ applyId: value.id })
    .subscribe((data) => {
      this.approvalOpinions = data;
    });
    this.verifyBatchNumber = value.verifyBatchNumber
    // console.log(this.verifyBatchNumber,"this.verifyBatchNumber")
    this.caseApplyRecordService
    .getApplyTopInfo(this.verifyBatchNumber)
    .subscribe((data) => {
      console.log(data,"data")
      this.badDebtAllDatas.push(data)
      this.approvalDescription.push(data)
    });
}
  private reset() {
    const form: any = this.$refs['form'];
    form.resetFields();
  }

  private print() {
    const tableContent:any = document.getElementById('table-content');
    const newContent = tableContent.innerHTML
    const oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print();
    window.location.reload();
    document.body.innerHTML = oldContent;
  }
  
}
</script>

<style lang="less">
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
@media print{
  // 打印时去掉url地址
  @page {
    size: auto;  
    margin: 0mm; 
  }
  html,body{
    width: 100%;
  }
	.noprint{
		display:none
	}
	.printonly{
    display:block;
    width:100%;
    height:100%;
    .printStyle{
      display: block;
      width: 1100px;
      margin: 0 auto;
      // .el-table__header-wrapper{
      //   .el-table__header{
      //     width:100%!important;
      //   }
      // }
      .el-table__body-wrapper{
        .el-table__body{
          // width:100%!important;
          td{
            .cell{
              white-space: wrap!important;
              width:100%!important;
            }
          }
        }
      }
    }
  }
  
}

</style>
